<!DOCTYPE html>
<html>
<head>
	<title>我的订单</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<!-- 所有的 css -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/css/admin.css">
	<style>
		.order-container {
			padding: 20px;
			max-width: 1200px;
			margin: 0 auto;
		}
		.order-card {
			margin-bottom: 20px;
			padding: 20px;
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
		}
		.order-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;
			padding-bottom: 10px;
			border-bottom: 1px solid #eee;
		}
		.order-info {
			display: flex;
			align-items: center;
			gap: 15px;
		}
		.product-image {
			width: 80px;
			height: 80px;
			object-fit: cover;
			border-radius: 4px;
		}
		.product-details {
			flex: 1;
		}
		.product-name {
			font-weight: bold;
			color: #333;
			margin-bottom: 5px;
		}
		.product-spec {
			color: #666;
			font-size: 14px;
		}
		.order-actions {
			display: flex;
			gap: 10px;
			justify-content: flex-end;
			margin-top: 15px;
		}
	</style>
</head>
<body>
	<div id="app" class="order-container">
		<h2>我的订单</h2>
		
		<el-tabs v-model="activeTab" @tab-click="handleTabClick">
			<el-tab-pane label="全部订单" name="all"></el-tab-pane>
			<el-tab-pane label="待付款" name="pending"></el-tab-pane>
			<el-tab-pane label="待发货" name="paid"></el-tab-pane>
			<el-tab-pane label="待收货" name="shipped"></el-tab-pane>
			<el-tab-pane label="已完成" name="completed"></el-tab-pane>
		</el-tabs>

		<div class="order-card" v-for="order in filteredOrders" :key="order.id">
			<div class="order-header">
				<div>
					<span>订单号：{{ order.orderNo }}</span>
					<span style="margin-left: 20px;">下单时间：{{ order.createTime }}</span>
				</div>
				<el-tag :type="getStatusType(order.status)">{{ order.statusText }}</el-tag>
			</div>
			
			<div class="order-info">
				<img :src="order.productImage" :alt="order.productName" class="product-image">
				<div class="product-details">
					<div class="product-name">{{ order.productName }}</div>
					<div class="product-spec">规格：{{ order.productSpec }}</div>
					<div class="product-spec">数量：{{ order.quantity }}</div>
				</div>
				<div style="text-align: right;">
					<div style="font-size: 18px; color: #e6a23c; font-weight: bold;">￥{{ order.totalAmount }}</div>
					<div style="color: #666; font-size: 14px;">含运费</div>
				</div>
			</div>
			
			<div class="order-actions">
				<el-button size="small" @click="viewOrderDetail(order)">查看详情</el-button>
				<el-button v-if="order.status === 'pending'" type="primary" size="small" @click="payOrder(order)">立即付款</el-button>
				<el-button v-if="order.status === 'shipped'" type="success" size="small" @click="confirmReceive(order)">确认收货</el-button>
				<el-button v-if="order.status === 'completed'" size="small" @click="applyAfterSale(order)">申请售后</el-button>
				<el-button v-if="order.status === 'pending'" size="small" @click="cancelOrder(order)">取消订单</el-button>
			</div>
		</div>

		<div v-if="filteredOrders.length === 0" style="text-align: center; padding: 50px;">
			<el-empty description="暂无订单数据"></el-empty>
		</div>
	</div>

	<!-- 所有的 js -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				activeTab: 'all',
				orders: [
					{
						id: 1,
						orderNo: 'HY20240119001',
						productName: '衡阳湘莲',
						productSpec: '500g/盒',
						productImage: 'https://p1.ssl.qhimgs1.com/sdr/400__/t01eb66981cebfbe57b.jpg',
						quantity: 2,
						totalAmount: 68.80,
						status: 'shipped',
						statusText: '待收货',
						createTime: '2024-01-19 14:30:00'
					},
					{
						id: 2,
						orderNo: 'HY20240118002',
						productName: '衡阳祁东黄花菜',
						productSpec: '300g/袋',
						productImage: 'https://p0.ssl.qhimgs1.com/sdr/400__/t046c7d7ad2ee5b407a.jpg',
						quantity: 3,
						totalAmount: 89.40,
						status: 'completed',
						statusText: '已完成',
						createTime: '2024-01-18 10:15:00'
					}
				]
			},
			computed: {
				filteredOrders() {
					if (this.activeTab === 'all') {
						return this.orders;
					}
					return this.orders.filter(order => order.status === this.activeTab);
				}
			},
			methods: {
				handleTabClick(tab) {
					console.log('切换到标签页：', tab.name);
				},
				getStatusType(status) {
					const statusMap = {
						pending: 'warning',
						paid: 'info',
						shipped: 'primary',
						completed: 'success'
					};
					return statusMap[status] || 'info';
				},
				viewOrderDetail(order) {
					this.$message.info('查看订单详情：' + order.orderNo);
				},
				payOrder(order) {
					this.$confirm('确认支付订单 ' + order.orderNo + '？', '确认支付', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						order.status = 'paid';
						order.statusText = '待发货';
						this.$message.success('支付成功');
					}).catch(() => {
						this.$message.info('已取消支付');
					});
				},
				confirmReceive(order) {
					this.$confirm('确认收货？', '确认收货', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						order.status = 'completed';
						order.statusText = '已完成';
						this.$message.success('确认收货成功');
					}).catch(() => {
						this.$message.info('已取消');
					});
				},
				applyAfterSale(order) {
					this.$message.info('跳转到售后申请页面：' + order.orderNo);
				},
				cancelOrder(order) {
					this.$confirm('确认取消订单 ' + order.orderNo + '？', '取消订单', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						// 从订单列表中移除
						const index = this.orders.findIndex(o => o.id === order.id);
						if (index > -1) {
							this.orders.splice(index, 1);
						}
						this.$message.success('订单已取消');
					}).catch(() => {
						this.$message.info('已取消');
					});
				}
			}
		});
	</script>
</body>
</html>